<template>
  <div>
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in imgs" :key="item.img"> <img :src="item.img" :alt="item.url" ></mt-swipe-item>
    </mt-swipe>

    <!-- 九宫格布局 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                        <router-link to="/home/newslist">
                            <img src="../imgs/1.png" alt="">
		                    <div class="mui-media-body">新闻资讯</div>
                        </router-link>
                    </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
		                    <img src="../imgs/2.png" alt="">
		                    <div class="mui-media-body">图片分享</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
		                    <img src="../imgs/3.png" alt="">
		                    <div class="mui-media-body">商品购买</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
		                    <img src="../imgs/4.png" alt="">
		                    <div class="mui-media-body">留言反馈</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
		                    <img src="../imgs/5.png" alt="">
		                    <div class="mui-media-body">视频专区</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
		                    <img src="../imgs/6.png" alt="">
		                    <div class="mui-media-body">联系我们</div></a></li>
		        
		        </ul> 
		</div>
  </div>
</template>
<script>

import { Toast } from 'mint-ui'
export default {
  name: "Home",
  data(){
      return{
          imgs:[
              {url:"http://www.bestrivenlf.cn",img:"http://www.bestrivenlf.cn/upload/markPic/1547300801452_12069.png"},
              {url:"http://www.bestrivenlf.cn",img:"http://www.bestrivenlf.cn/upload/markPic/1538987051008_12375.png"},
              {url:"http://www.bestrivenlf.cn",img:"http://www.bestrivenlf.cn/upload/markPic/1538987066266_99701.png"}
          ]
      }
  },
  created(){
      this.getImgs();
  },
  methods: {
      getImgs(){
          //获取轮播图数据
        //   this.$http.get('http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=3').then(result=>{
        //       console.log(result)
        //   })
        //跨域
        // this.$http.jsonp('http://localhost:8081/vueStudy/getImgs',{params:{'count':3,'type':'.jpg'}}
        // ).then(result=>{
        //     console.log(result.body)
        // })
        //假数据
        Toast("轮播图加载成功")
      }
  }
};
</script>
<style lang="css" scoped>
.mint-swipe{
    height:200px;
    
}
.mint-swipe-item img{
        height: 100%;
        width: 100%;
}
.mui-grid-view.mui-grid-9{
    background-color: #fff;
    border:none;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border:0;
}
.mui-grid-view.mui-grid-9 img{
    width: 60px;
    height:60px;
}
</style>